The Brief
Tokyo Digital created Pixmas, a festive web application that allows users to design and share their own 3D pixel-style characters for Christmas. Utilising HTML5 Canvas, JavaScript, 3D CSS, and WebGL technologies, Pixmas offers a vast library of body parts and color options, enabling over 1.1 million unique character combinations. This app is fully responsive, ensuring seamless user experience across desktop, tablet, and mobile devices.
Pixmas encourages users to delve into its features, some of which are specially designed for the latest mobile platforms. Its innovative approach garnered attention and was featured on web.dev. Link to Pixmas on wev.dev
In an interview, our developer Jim Savage discussed the project:
Q & A with Jim Savage:
Why the web?
At Tokyo Digital, we prefer responsive and mobile web development over native-only approaches. Pixmas originated from HTML5 & CSS3 experimentation during downtime between projects. Our front-end development team focuses on web technologies for research, keeping up with evolving browser functionalities that now mimic native apps, like geolocation, camera access, and local database storage. These advancements offer a native-like experience with the benefits of cross-platform compatibility and rapid development. We assess each project to recommend the best platform, be it web or native, based on the project's needs.
What worked really well during development?
The focus on 3D Transforms was a key aspect of Pixmas, exploring the limits of CSS. The pixelated style suited the browser environment well, especially given browsers' affinity for square shapes. Building cubes with 3D transforms and HTML was relatively straightforward. However, refining the interaction and animations required some trial and error.
What surprised you during development?
The most surprising aspect was the smooth performance of the 3D elements on mobile platforms, particularly on lesser-known Android devices, which exceeded our expectations.
If you could improve your app with any API, what would it be?
If we were to recreate Pixmas, we'd likely use a WebGL-based API. While manipulating HTML DOM elements in 3D via CSS was intriguing, WebGL's dedicated hardware-accelerated technology offers more power for web-based 3D applications. CSS 3D is suitable for basic effects and transitions, but we encountered limitations in browser performance while coding Pixmas with it.